import { Avatar, Col, Flex, Row, Typography } from 'antd'
import React from 'react'

function BasicInfo() {
  return (
    <>
      <Row>
        <Col span={3}>
          <Avatar
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            size={64}
          />
        </Col>
        <Col span={8} className="base-info">
          <span>
            用户昵称：<span>张三</span>
          </span>
          <span>
            用户价值：<span>9万</span>
          </span>
        </Col>
        <Col span={10} className="base-info">
          <span>
            关注时间：<span>2022-2-11</span>
          </span>
          <span>
            最后一次互动时间：<span>2022-12-11 14:00</span>
          </span>
        </Col>
      </Row>
      <Typography.Title className="base-info-bg" level={5}>
        基础信息
      </Typography.Title>
      <Row>
        <Col span={7} className="base-info">
          <span>
            性别：<span>男</span>
          </span>
          <span>
            婚姻：<span>未婚</span>
          </span>
        </Col>
        <Col span={17} className="base-info">
          <span>
            生日：<span>1999-12-20</span>
            <span style={{ marginLeft: 60, color: '#999' }}>
              职业：<span>程序员</span>
            </span>
          </span>
          <span>
            常用地址：<span>北京市海淀区中鼎大厦</span>
          </span>
        </Col>
      </Row>
      <Typography.Title className="base-info-bg" level={5}>
        营销属性
      </Typography.Title>
      <Row>
        <Col span={7} className="base-info">
          <span>
            用户偏好：<span>美食,汽车</span>
          </span>
          <span>
            用户满意度：<span>高</span>
          </span>
        </Col>
        <Col span={6} className="base-info">
          <span>
            地理位置：<span>北京</span>
          </span>
          <span>
            生命活跃度：<span>20-23点</span>
          </span>
        </Col>
        <Col span={11} className="base-info">
          <span>
            所属人群：<span>高净值VIP</span>
            <span style={{ marginLeft: 40, color: '#999' }}>
              用户来源：<span>xxx文章</span>
            </span>
          </span>
          <span>
            生命周期：<span>409.51</span>
          </span>
        </Col>
      </Row>
      <Typography.Title className="base-info-bg" level={5}>
        行为属性
      </Typography.Title>
      <Row>
        <Col span={7} className="base-info">
          <span>
            互动次数：<span>10/5/3</span>
          </span>
          <span>
            消费总金额：<span>22550.00</span>
          </span>
        </Col>
        <Col span={6} className="base-info">
          <span>
            月度活跃度：<span>2.6次/天</span>
          </span>
          <span>
            平均消费金额：<span>500.00</span>
          </span>
        </Col>
        <Col span={6} className="base-info">
          <span>
            下单总数量：<span>45</span>
          </span>
          <span>
            消费周期：<span>28天</span>
          </span>
        </Col>
        <Col span={5} className="base-info">
          <span>
            月度订单数：<span>0.3/单</span>
          </span>
          <span>
            活动参与数：<span>2次</span>
          </span>
        </Col>
      </Row>
    </>
  )
}

export default BasicInfo
